<style lang="less">

</style>
<template>
    <div>
        <Drawer :closable="false" placement="right" v-model="drawerVisible" width="40%" :title="drawerTitle">
            <Card shadow="false">
                <Row>
                    <Form ref="form" :model="form" :label-width="70" :rules="formValidate" style="position:relative">

                        <FormItem label="退款金额" prop="returnAmount">
                            <InputNumber style="width:150px" :min="1" v-model="form.returnAmount"></InputNumber>
                        </FormItem>
                        <FormItem label="退款时间" prop="returnDate">
                            <DatePicker type="datetime" @on-change="dataChange" :value="form.returnDate" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择退款日期" style="width: 200px"></DatePicker>
                        </FormItem>
                        <FormItem label="退款原因" prop="reason">
                            <Input v-model="form.reason" :rows="4" type="textarea" placeholder="Enter something..." />
                        </FormItem>
                        <Form-item class="br">
                            <Button type="primary" :loading="submitLoading" @click="handelSubmit" style="width:100px">提交</Button>
                            <Button @click="handelCancel">取消</Button>
                        </Form-item>
                        <Spin size="large" fix v-if="loading"></Spin>
                    </Form>
                </Row>
            </Card>
        </Drawer>
    </div>
</template>
<script>
    import {returnAmount} from "@/api/bus";

    export default {
        name: "return-drawer",
        components: {},
        data() {
            return {
                type: 0,
                loading: false, // 表单加载状态
                selectUsers: [],
                drawerTitle: "订单退款",
                drawerVisible: false,
                form: {
                    returnAmount: 1,
                    returnDate: "",
                    reason:"",
                    orderId: ""
                },
                formValidate: {
                    returnAmount: [{required: true, type: "number", message: "退款金额不能为空", trigger: "blur"}],
                    returnDate: [{required: true, message: "退款时间不能为空", trigger: "blur"}]
                },
                submitLoading: false, // 添加或编辑提交状态
                dataEdit: ""// 编辑数据
            };
        },
        methods: {
            init() {

            },
            showDrawer(row) {
                if (row) {
                    this.type = 1;
                    this.drawerTitle = "订单退款";
                    this.form.orderId = row.id;
                }
                this.drawerVisible = true;
            },
            //打开用户选择
            showUserChooseDrawer() {
                this.$refs.user.showDrawer();
            },
            clearUser() {
                this.$refs.user.clearSelectUser();
            },
            dataChange(data1, data2) {
                this.form.returnDate = data1;
            },
            handelSubmit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        // 编辑
                        returnAmount(this.form).then(res => {
                            this.submitLoading = false;
                            if (res.status === true) {
                                this.$Message.success("操作成功");
                                this.$parent.getDataList();
                                this.drawerVisible = false;
                            }
                        });
                    }
                });
            },
            handelCancel() {
                this.drawerVisible = false;
            }
        },
        mounted() {
            this.init();
        },
        watch: {}
    };
</script>